import { Button, Input, Modal, ModalProps, Space } from 'antd';
import { memo, useEffect, useState } from 'react';

interface Props {
  editType: string;
  onConfirm: (name: string) => void;
}

const NewDatasetModal = ({ editType, open, onConfirm, onCancel, title }: Props & ModalProps) => {
  const [datasetName, setDatasetName] = useState<string>('');

  useEffect(() => {
    setDatasetName('');
  }, [open]);

  return (
    <Modal
      title={
        <div style={{ textAlign: 'center', width: '100%' }}>
          新建{title ? title : editType == 'dataset' ? '知识库' : '文件夹'}
        </div>
      }
      open={open}
      onOk={() => {
        onConfirm(datasetName);
      }}
      onCancel={(e) => {
        onCancel && onCancel(e);
        setDatasetName('');
      }}
      okText="确定"
      cancelText="取消"
      closable={false}
      width={300}
      centered
      footer={
        <div style={{ textAlign: 'center' }}>
          <Space size={36}>
            <Button onClick={onCancel}>取消</Button>
            <Button
              type="primary"
              onClick={() => {
                onConfirm(datasetName);
              }}
            >
              确定
            </Button>
          </Space>
        </div>
      }
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '60px',
        }}
      >
        <Input value={datasetName} onChange={(e) => setDatasetName(e.target.value?.trim())} />
      </div>
    </Modal>
  );
};

export default memo(NewDatasetModal);
